  <template>
    <span>{{sum}}</span> <br>
    <button @click="sum++">+1</button>
    <hr>
    <span>{{msg}}</span><br>
    <button @click="msg+='!'">改变消息</button>
    <hr>
    <p>姓名：{{person.name}}</p>
    <p>年龄：{{person.age}}</p>
    <p>薪资：{{person.job.j1.salary}}k</p>
    <button @click="person.name+='~'">修改姓名</button>
    <button @click="person.age++">修改年龄++</button>
    <button @click="person.job.j1.salary++">涨薪</button>

  </template>
  
  <script>
  import {ref,reactive,watch} from 'vue'
  export default {
    name: 'App',
    // vue2中的监视
    //  - 简写
    // watch:{
    //   sum(newValue,oldValue){
    //     console.log(`新值：${newValue}，旧值：${oldValue}`);
    //   }
    // },
    // 完整写法
    // watch:{
    //   sum:{
    //     immediate:true,
    //     handler(newValue,oldValue){
    //       console.log(`新值：${newValue}，旧值：${oldValue}`);
    //     }
    //   }
    // },
    setup(){
      let sum = ref(0);
      let msg = ref('你好')
      let person = reactive({
        name:'zhangsan',
        age:21,
        job:{
          j1:{
            salary:12
          }
        }
      })
      // vue3中的监视 - 第一个参数：监视的数据 第二个参数：回调函数 第三个参数：其余配置项-如immediate，deep等配置
      //  监视一个数据时
      // watch(sum,(newValue,oldValue)=>{
      //   console.log(`新值：${newValue}，旧值：${oldValue}`);
      // },{immediate:true})
      // 监视两个数据时
      // watch([sum,msg],(newValue,oldValue)=>{
      //   console.log(`新值：${newValue}，旧值：${oldValue}`);
      // },{immediate:true})

      // vue3监听reactive定义的数据 -vue3中当数据改变时无法监听到旧的数据。 -强制深度监视
      watch(person,(newValue,oldValue)=>{
        console.log('新值：',newValue,'旧值：',oldValue);
      })
      // 监视reactive中的某个属性值 - 第一个参数写成一个回调函数，返回值为需要监视的数据，多个值写在一个数组里
      watch(()=>person.age,(newValue,oldValue)=>{
        console.log('新值：',newValue,'旧值：',oldValue);
      })
      // 监视reactive中的一个属性，且改属性仍为一个对象 - 需要开启深度监视 ，但oldValue仍无法正确读取
      watch(()=>person.job,(newValue,oldValue)=>{
        console.log('新值：',newValue,'旧值：',oldValue);
      },{deep:true})
      return {
        sum,
        msg,
        person
      }
    }
  }
  </script>
  
  <style>
  
  </style>
  